<template>

  <GlobalPage>

    <div class="user-list unified-bg-white unifined-border-radius">
      <div class="user-table-header">
        <div class="user-table-header-left">

          <div class="custom-style">
            <!-- <el-segmented v-model="Data.UserStateOptions" :options="Data.UserStateOptionsValue" /> -->
          </div>

          <el-button type="primary" round>批量操作</el-button>
        </div>
        <div class="user-table-header-right">
          <el-button round>注册新用户</el-button>
        </div>
      </div>

      <div class="table-box">

        <template v-if="Data.list.length">

          <el-table :data="Data.list" stripe style="font-size: 10px;">

            <el-table-column type="selection" width="35" align="center" />
            <el-table-column prop="id" label="ID" width="45" align="center">

              <template #default="{ row }">
                <el-link style="font-size: 10px;" type="primary">{{ row.id }}</el-link>
              </template>

            </el-table-column>

            <el-table-column label="头像" width="45" align="center">
              <template #default="scope">
                  <img class="user-table-avatar-img" :src="scope.row.avatar" alt="">
              </template>
            </el-table-column>
            <el-table-column prop="username" label="用户名">
              <template #default="{ row }">
                <span style="margin-right: 6px">{{ row.username }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="nickname" label="昵称" />
            <el-table-column width="65" align="center" label="最近活跃">
              <template #default>
                <div>3小时前</div>
              </template>
            </el-table-column>

            <el-table-column width="58" prop="gender" label="性别" align="center">
              <template #default="{ row }">
                <el-tag size="small">{{ row.gender || "保密" }}</el-tag>
              </template>
            </el-table-column>

            <el-table-column width="150" prop="register_time" label="注册时间" align="center" />

            <el-table-column prop="state" label="状态" width="65" align="center">
              <template #default="{ row }">
                <el-switch v-model="row.state" inline-prompt :active-value="1" active-text="正常"
                  inactive-text="停用" :inactive-value="0" @change="changeState(row, index)" />
              </template>
            </el-table-column>
            <el-table-column width="50" fixed="right" label="操作" align="center">
              <template #default="{ row, $index: index }">
                <el-dropdown>
                  <el-button :icon="MoreFilled" circle />
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item @click="clickLook(row)">查看</el-dropdown-item>
                      <el-dropdown-item @click="clickToBlack(row)">拉入黑名单</el-dropdown-item>
                      <template v-if="row.lock">
                        <el-dropdown-item @click="ClickLockUser(row)">锁定详情</el-dropdown-item>
                      </template>
                      <template v-else>
                        <el-dropdown-item @click="ClickLockUser(row)">锁定</el-dropdown-item>
                      </template>
                      <el-dropdown-item>登出</el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </template>
            </el-table-column>
          </el-table>

        </template>

        <template v-else>

          <el-skeleton :rows="8" animated />

        </template>

        <GlobalPagination :total="Data.total" @paginationChange="paginationChange"></GlobalPagination>
      </div>

      <el-dialog v-model="Data.LockDialogShow" title="锁定用户" width="600">

        <div class="user-lock-dialog-header">

          <img class="user-lock-dialog-header-info-avatar" :src="Data.LockUserInfo.avatar" alt="">

          <div class="user-lock-dialog-header-info-left">
            <p class="user-lock-dialog-header-info-left-username">{{ Data.LockUserInfo.username }}</p>
            <span class="user-lock-dialog-header-info-left-id">{{ "ID:" + Data.LockUserInfo.id }}</span>
          </div>
          <div class="user-lock-dialog-header-info-right"></div>

        </div>

        <el-alert title="锁定用户可导致用户的任何行为都被阻止" type="warning" show-icon />

        <div class="user-lock-dialog-table">
          <el-table border :data="LockUserDateTable" highlight-current-row @current-change="LockUserCurrentChange">
            <el-table-column prop="title" label="锁定时长" width="80" align="center" />
            <el-table-column prop="end_date" label="锁定结束时间" />
            <el-table-column width="60" align="center">
              <template #default="{ row }">
                <p v-if="Data.LockUserDateSelectIndex == row.index">已选择</p>
              </template>
            </el-table-column>
          </el-table>

        </div>

        <div class="user-lock-dialog-reason">
          <p class="user-lock-dialog-reason-title">锁定原因：</p>
          <el-input v-model="Data.LockUserReason" class="user-lock-reason-input" :autosize="{ minRows: 2, maxRows: 4 }"
            type="textarea" placeholder="请输入锁定该用户的原因" />
        </div>

        <template #footer>
          <div class="user-lock-dialog-footer">
            <div class="user-lock-dialog-footer-left">
              <el-checkbox v-model="Data.LockUserLogout" label="同时登出用户" size="large" />
              <p class="user-lock-dialog-footer-left-tips">登出用户会将当前在线用户踢出</p>
            </div>
            <div class="user-lock-dialog-footer-right">
              <el-button type="error" @click="ClickCancelLock">取消</el-button>
              <el-button type="primary" @click="SubmitLockUser">锁定</el-button>
            </div>
          </div>
        </template>

      </el-dialog>
      <el-dialog v-model="Data.UserManageDiaLog" title="Shipping address" width="80%">
        <userManageDialog v-if="Data.UserManageDiaLog" :user="Data.UserManageUser"></userManageDialog>
      </el-dialog>
    </div>
  </GlobalPage>
</template>

<script setup>
import userManageDialog from "./components/userManageDialog/userManageDialog.vue";
import { ElMessage } from 'element-plus'
import Dayjs from 'dayjs'
import { MoreFilled, View, Edit } from "@element-plus/icons-vue";
import API from "@/api";
import { useRouter } from "vue-router";
import { reactive, onBeforeMount, onMounted, computed, watch } from "vue";
import GlobalPage from "@/components/Global-Page/Global-Page.vue";
import GlobalPagination from "@/components/GlobalPagination/index.vue";
// 用户基本信息
// 锁定用户时间表格
const LockUserDateTable = computed(() => {
  // 当前时间戳
  let currentDate = Dayjs().valueOf()
  return Data.LockUserDateOptions.map((item) => {
    item.lock_end_date = currentDate + item.date_length
    item.end_date = Dayjs(currentDate + item.date_length).format("YYYY-MM-DD HH:mm:ss")
    return item
  })
})
const Data = reactive({
  UserManageDiaLog: false,
  UserManageUser: null,
  LockDialogShow: false,
  LockUserInfo: {},
  LockUserReason: "",
  LockUserLogout: false,
  LockUserDateSelectIndex: 0,
  LockUserDateOptions: [
    { index: 0, title: "一天", date_length: 86400000 },
    { index: 1, title: "三天", date_length: 259200000 },
    { index: 2, title: "五天", date_length: 432000000 },
    { index: 3, title: "不限期", date_length: null },
  ],
  UserStateOptions: [
    {
      label: "正常", value: 0
    }, {
      label: "锁定", value: 0
    }, {
      label: "注销中", value: 0
    }, {
      label: "已注销", value: 0
    }, {
      label: "黑名单", value: 0
    },
  ],
  UserStateOptionsValue: 0,
  page: null,
  pages: null,
  limit: 10,
  list: [],
  total: null,
});
watch(() => Data.LockDialogShow, (newVal) => {
  if (newVal == false) {
    Data.LockUserReason = ""
    Data.LockUserLogout = false
    Data.LockUserDateSelectIndex = 0
  }
})
function ClickLockUser(user) {
  Data.LockDialogShow = true
  Data.LockUserInfo = user
}
function ClickCancelLock() {
  Data.LockDialogShow = false
}
function LockUserCurrentChange(e) {
  let { index } = e
  Data.LockUserDateSelectIndex = index
}
function SubmitLockUser() {
  let { id } = Data.LockUserInfo
  let logout = Data.LockUserLogout
  let reason = Data.LockUserReason
  if (!id) {
    let message = "没有检测到用户id"
    ElMessage({
      message,
      type: 'warning',
    })
    return
  } else if (!reason) {

    let message = '请输入锁定该用户的原因'
    ElMessage({
      message,
      type: 'warning',
    })
    return
  }
  let LockUserDateSelectIndex = Data.LockUserDateSelectIndex
  let dateOption = LockUserDateTable.value.find(i => i.index == LockUserDateSelectIndex)
  let { lock_end_date } = dateOption
  API.Manage.LockUser({
    user: id,
    logout,
    reason,
    lock_end_date
  })
    .then(res => {
      let { msg } = res
      let message = msg
      ElMessage({
        message,
        type: 'success',
      })
    })
    .catch(err => {
      console.log(err);
      let { msg } = err
      ElMessage({
        message: msg,
        type: 'warning',
      })
    })
}
function clickToBlack() {

}
onBeforeMount(() => {
  GetUserList();
});
async function GetUserList() {
  let page = Data.page;
  let limit = Data.limit;
  API.Manage.userList({
    page,
    limit,
  })
    .then((res) => {
      console.log(res);
      let { data } = res;
      let { page, pages, limit, list, total } = data;
      Data.list = list;
      Data.total = total;
      Data.pages = pages;
      Data.page = page;
      Data.limit = limit;
    })
    .catch((err) => {
      console.log(err);
    });
}
async function clickLook(row) {
  let { id } = row;
  Data.UserManageUser = id
  Data.UserManageDiaLog = true;
}
async function paginationChange(e) {
  let page = Data.page;
  if (page != e) {
    Data.page = e;
    GetUserList();
  }
}

async function changeState(row, index) {
  let { id, state } = row;

  console.log({
    id,
    state,
  });
}
</script>

<style lang="scss">
.custom-style .el-segmented {
  --el-segmented-item-selected-color: var(--el-text-color-primary);
  --el-segmented-item-selected-bg-color: #ffd100;
  --el-border-radius-base: 16px;
}

.user-table-box {
  padding: 15px;
  background: white;
}

.user-table-header {
  background: white;
  padding: 15px;
  padding-bottom: 0px;
  display: flex;
  justify-content: space-between;
}

.user-lock-dialog {

  &-header {

    display: flex;
    margin-bottom: 10px;

    &-info {
      padding-bottom: 10px;

      &-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 10px;
      }

      &-left {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding-top: 3px;

        &-username {
          font-size: 12px;
        }

        &-id {
          font-size: 10px;
        }
      }

      &-right {
        flex: 1;
        display: flex;
        flex-direction: column;
      }
    }

  }

  &-table {
    // border-top: 10px solid #c3c3c324;
    // border-bottom: 10px solid #c3c3c324;
    margin: 5px 0px;
    padding: 5px 0px;
    margin-bottom: 10px;
  }

  &-reason {

    &-title {
      margin-bottom: 15px;
    }

    &-input {
      width: 100%;
      margin-top: 8px;
    }
  }

  &-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;

    &-left,
    &-right {
      flex: 1;
    }

    &-left {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;

      &-tips {
        font-size: 10px;
        color: gray
      }
    }

    &-right {
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }
  }
}

.user-table-header-left {
  display: flex;
}
</style>
